<template>
  <Dialog title="图片分析对比" v-model="dialogVisible" width="1100px">
    <div class="contrast_box">
      <div class="select_box">
        <el-button class="option_btn"
          :class="{ 'custom-btn': currentActiveId !== item.id, 'el-button--primary': currentActiveId === item.id }"
          @click="handleButtonClick(item)" v-for="(item, index) in selectList" :key="index">{{ item.label
          }}</el-button>
      </div>
      <!-- <ImgComparisonSlider v-for="(item, index) in resultLists" :key="index">
        <img slot="first" class="upload_image_after" :src="beforeImg" />
        <img slot="second" class="upload_image_before"
          :src="item ? 'data:image/jpeg;base64,' + item.face_maps[selectList[currentActiveId - 1].type] : beforeImg" />
      </ImgComparisonSlider> -->

      <div v-if="currentActiveId == 1" class="merged-image-container upload_image_after">
        <img :src="item.imageUrl" :class="index == 0 ? 'left-image' : 'right-image'"
          v-for="(item, index) in resultLists" :key="index" />
        <div class="divider"></div>
      </div>
      <ImgComparisonSlider v-else>
        <div slot="first" class="upload_image" v-for="(item, index) in resultLists" :key="index">
          <img class="upload_image_after" :src="item.imageUrl" />
        </div>
        <div slot="second" class="upload_image" v-for="(item, index) in resultLists" :key="index">
          <img slot="second" class="upload_image_before"
            :src="item ? 'data:image/jpeg;base64,' + item.face_maps[selectList[currentActiveId - 1].type] : beforeImg" />
        </div>
      </ImgComparisonSlider>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
  import { ImgComparisonSlider } from '@img-comparison-slider/vue';
  /** 会员皮肤状态对比分析*/
  defineOptions({ name: 'FaceAnalyseContrast' })
  const selectList = [
    { id: 1, label: '原图', type: '' },
    { id: 2, label: '红区图', type: 'red_area' },
    { id: 3, label: '色沉图', type: 'brown_area' },
    { id: 4, label: '毛孔图', type: 'texture_enhanced_pores' },
    { id: 5, label: '水分图', type: 'water_area' },
    { id: 6, label: '黑头圈', type: 'texture_enhanced_blackheads' },
    { id: 7, label: '油光图', type: 'texture_enhanced_oily_area' },
    { id: 8, label: '皱纹图', type: 'texture_enhanced_lines' },
    { id: 9, label: '痤疮', type: 'roi_outline_map' },
    { id: 10, label: '闭口粉刺', type: 'acne' },
    { id: 11, label: '色斑', type: 'acne' },
    { id: 12, label: '痣', type: 'acne' },
  ];
  // 用于存储当前激活按钮的 id
  const currentActiveId = ref(1);

  const dialogVisible = ref(false) // 弹窗的是否展示
  const resultLists = ref([]) // 对比结果列表
  const beforeImg = ref('http://test.yudao.iocoder.cn/20250713/微信图片_20250711212555_38_1752388854321.jpg')
  const defaultImg = "https://cdn.faceplusplus.com.cn/mc-official/demo/images/demo-pic-skinAnalysis-1.jpg"
  /** 打开弹窗 */
  const open = async (resultList?: Array<object>) => {
    console.log("result", resultList)
    // let list = []
    // let faceResult = JSON.parse(localStorage.getItem('faceResult') || '');
    // console.log(faceResult);

    // // 深拷贝 faceResult 并将其存入 resultList
    // if (faceResult) {
    //   list.push(faceResult);
    //   list.push(faceResult);
    // }
    resultLists.value = resultList;
    dialogVisible.value = true

  }
  const handleButtonClick = (item) => {
    // 更新当前激活按钮的 id
    currentActiveId.value = item.id;
  };
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>

  .contrast_box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .select_box {
      display: flex;
      width: 100%;
      height: 0;
      height: auto;
      overflow: hidden;
      transition: all 0.3s;
      flex-wrap: wrap;

      .option_btn {
        width: 104px;
        height: 36px;
        margin: 10px 8px 6px;
      }
    }
  }

  .upload_image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .upload_image_after,
  .upload_image_before {
    width: 543px;
    height: 500px;
    background-color: transparent !important;
  }

  .merged-image-container {
    position: relative;
    display: inline-block;
    margin-top: 20px;
  }

  .left-image,
  .right-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .left-image {
    clip-path: inset(0 50% 0 0);
  }

  .right-image {
    clip-path: inset(0 0 0 50%);
  }

  .divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;

    /* 分割线宽度 */
    background-color: white;

    /* 分割线颜色 */
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgb(0 0 0 / 50%);

    /* 添加阴影，增强视觉效果 */
  }
</style>